<template>
  <a-modal
    :title="title"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :width="800"
  >
    <div style="padding:0 30px;">

      <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }" labelAlign="left">
        <a-form-item  style="display: none">
        <a-input v-decorator="['sourceFileName']" style="display: none"/>
        </a-form-item>
        <a-form-item style="display: none" >
        <a-input v-decorator="['size']" style="display: none"/>
        </a-form-item>
        <template v-for="item in list">

            <template v-if="item.type == 'pushmethod'">
              <a-form-item  :label-col="{ span: 0 }" :wrapper-col="{ span: 0 }">
                <a-input v-decorator="[item.name, { rules: [{ required: item.require, message: item.errortip }] }]" style="display: none"/>
              </a-form-item>
              <a-row>
                <a-col :span="6">
                  {{item.label}}:
                </a-col>
                <a-col :span="18">

                  <a-radio-group  v-model="failmode" @change="changepush()">
                    <a-radio value="1">不处理</a-radio>
                    <a-radio value="2">重复推送</a-radio>
                  </a-radio-group>

                  重复次数: <a-input style="width: 50px;" v-model="failrepeat" @change="changepush()"></a-input>次
                  间隔时间: <a-input style="width: 50px;" v-model="failtime" @change="changepush()"></a-input>分钟
                </a-col>
              </a-row>
            </template>

            <template v-if="item.type == 'input'">
                <a-row>
                  <a-col :span="18">
                    <a-form-item :label="item.label" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                      <a-input v-decorator="[item.name, { rules: [{ required: item.require, message: item.errortip }] }]"/>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <template v-if="item.checkname" >
                      <a-form-item :label-col="{ span: 0,offset:0 }" :wrapper-col="{ span: 23,offset:1}">
                        <a-checkbox-group v-decorator="[item.checkname, {}]">
                          <a-checkbox  value="1">{{item.checklabel}}</a-checkbox>
                        </a-checkbox-group>
                      </a-form-item>
                    </template>

                    <template v-if="item.tip" >
                      <span class="tip">{{item.tip}}</span>
                    </template>
                  </a-col>
                </a-row>
            </template>

            <template v-if="item.type == 'weektime'">
              <a-form-item :label="item.label">
                <a-input v-decorator="[item.name, { rules: [{ required: item.require, message: item.errortip }] }]" style="display: none"/>
                <template v-if="item.pro">
                  <a-select v-model="mode" @change="changeweektime()">
                    <a-select-option value="1">立即触发</a-select-option>
                    <a-select-option value="2">指定时间</a-select-option>
                  </a-select>
                </template>
                <a-row v-if="!item.pro || (item.pro && mode == 2)">
                  <a-col :span="6" >
                    <a-select v-model="week" @click="changeweektime()">
                      <a-select-option  value="1">星期一</a-select-option>
                      <a-select-option  value="2">星期二</a-select-option>
                      <a-select-option  value="3">星期三</a-select-option>
                      <a-select-option  value="4">星期四</a-select-option>
                      <a-select-option  value="5">星期五</a-select-option>
                      <a-select-option  value="6">星期六</a-select-option>
                      <a-select-option  value="7">星期日</a-select-option>
                    </a-select>
                  </a-col>
                  <a-col :span="11" :offset="1">
                    <a-time-picker v-model="time" format="HH:mm" @change="changeweektime()"/>
                  </a-col>
                </a-row>
              </a-form-item>
            </template>

            <template v-if="item.type == 'timerank'">
              <a-row>
                <a-col :span="18">
                  <a-form-item :label="item.label" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                    <a-input v-decorator="[item.name, { rules: [{ required: item.require, message: item.errortip }] }]" style="display: none"/>
                    <a-time-picker format="HH:mm" v-model="timefrom" @change="changetimerank()"/> ~ <a-time-picker format="HH:mm" v-model="timeto" @change="changetimerank()"/>
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <template v-if="item.checkname" >
                    <a-form-item :label-col="{ span: 0,offset:0 }" :wrapper-col="{ span: 24}">
                      <a-checkbox-group v-decorator="[item.checkname, {}]">
                        <a-checkbox  value="1">{{item.checklabel}}</a-checkbox>
                      </a-checkbox-group>
                    </a-form-item>
                  </template>
                </a-col>
              </a-row>
            </template>

            <template v-if="item.type == 'switch'">
              <a-form-item :label="item.label">
               <a-switch v-decorator="[item.name, { rules: [{ required: item.require, message: item.errortip }] }]" checked-children="是" un-checked-children="否" />
              </a-form-item>
            </template>

            <template v-if="item.type == 'textarea'">
              <a-form-item :label="item.label">
               <a-textarea :rows="4" v-decorator="[item.name, { rules: [{ required: item.require, message: item.errortip }] }]"/>
              </a-form-item>
            </template>

            <template v-if="item.type == 'radio'">
              <a-form-item :label="item.label" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <a-row>
                <a-col :span="10">
                  <a-radio-group  v-decorator="[item.name, { rules: [{ required: item.require, message: item.errortip }] }]" >
                    <a-radio v-for="item in item.radiodata" :value="item.value">{{item.label}}</a-radio>
                  </a-radio-group>
                </a-col>
                <a-col :span="14">
                  <template v-if="item.tip">
                    <span class="tip">{{item.tip}}</span>
                  </template>
                </a-col>
              </a-row>
              </a-form-item>
            </template>

            <template v-if="item.type == 'tree'">
              <a-form-item :label="item.label">
              <TreeSelect
                v-decorator="[item.name, { rules: [{ required: item.require, message: item.errortip }] }]"
                :tree-data="item.treedata"
              >
              </TreeSelect>
              </a-form-item>
            </template>

            <template v-if="item.type == 'select'">
              <a-form-item :label="item.label">
              <a-select  v-decorator="[item.name, { rules: [{ required: item.require, message: item.errortip }] }]" >
                <a-select-option v-for="item in item.selectdata" :value="item.value">{{item.label}}</a-select-option>
              </a-select>
              </a-form-item>
            </template>

            <template v-if="item.type == 'iplist'">
              <a-form-item :label="item.label">
              <a-row>
                <a-col :span="18"><a-input v-model="ipinput[item.name]" placeholder="请输入IP地址,IP段或IP掩码"></a-input></a-col>
                <a-col :span="4" :offset="1" ><a-button type="primary" @click="addip(item.name)">添加</a-button></a-col>
              </a-row>
              <div class="iplist">
                <template v-if="ipjson[item.name]">
                  <div v-for="(item2,index) in ipjson[item.name].ip">
                    {{item2.value}}
                    <a-icon type="delete" class="icon" @click="deleteip(item.name,index)"/>
                  </div>
                </template>
              </div>
              <a-input v-decorator="[item.name, { rules: [{ required: item.require, message: item.errortip }] }]" style="display: none"/>
              </a-form-item>
            </template>

          <template v-if="item.type == 'addfile'">
            <a-form-item :label="item.label">
              <a-row>
                <a-col :span="18">
                  <div class="searchb">
                    <input placeholder="请输入" class="searchi" v-model="searchvalue" @input="handleChange"/>
                    <div class="searchl" v-if="showsl">
                      <div class="list" v-for="item in searchdata" @click="select(item)">
                        {{item.fileName}}
                      </div>
                    </div>
                  </div>
                </a-col>
              </a-row>
              <div class="iplist">
                <template v-if="files">
                  <div v-for="(item2,index) in files">
                    {{item2.name}}
                    <a-icon type="delete" class="icon" @click="deletefile(index)"/>
                  </div>
                </template>
              </div>
              <a-input v-decorator="[item.name, { rules: [{ required: item.require, message: item.errortip }] }]" style="display: none"/>
            </a-form-item>
          </template>



            <template v-if="item.type == 'upload'">
              <a-form-item :label="item.label">
              <a-upload
                name="file"
                action="/api/file/uploadFile"
                @change="handleuploadChange"
                method="post"
                :file-list="fileList"
                accept="exe,rpm,xls,deb,pdf"
              >
                <a-button> <a-icon type="upload" />点击上传 </a-button>
              </a-upload>

              <a-input v-decorator="[item.name, { rules: [{ required: item.require, message: item.errortip }] }]" style="display: none"/>
              </a-form-item>
            </template>
        </template>

      </a-form>
    </div>
  </a-modal>
</template>

<script>
import moment from 'moment';
import TreeSelect from 'ant-design-vue/es/tree-select'
import AAutoComplete from 'ant-design-vue/es/auto-complete'
import TagSelectOption from '@/components/TagSelect/TagSelectOption'
import {searchfile} from '@/api/patch'
export default {
  name: 'mymodal',
  components: { TagSelectOption, TreeSelect,AAutoComplete },
  data(){
    return{
      visible:false,
      title:'',
      list:[],
      form: this.$form.createForm(this, { name: 'mymodal' }),
      okfunc:null,
      moreinfo:{},
      ipinput:{},
      ipjson:{},
      fileList:[],
      week:'',
      time:'',
      weektimekey:'',
      timefrom:'',
      timeto:'',
      timerankkey:'',
      failmode:'',
      failrepeat:'',
      failtime:'',
      failkey:'',
      mode:'',
      searchvalue:'',
      searchdata:[],
      showsl:false,
      files:[],
      addfilekey:''
    }
  },
  mounted() {
    document.body.onclick = ()=>{
      this.showsl = false
    }
  },
  methods:{
    moment,
    select(item) {
      this.searchvalue = ''
      for (let i in this.files){
        if(this.files[i].id == item.id){
          return
        }
      }

      this.files.push({name:item.fileName,id:item.id})
      let j = {}
      j[this.addfilekey] = JSON.stringify(this.files)
      this.form.setFieldsValue(j)
    },
    deletefile(index){
      this.files.splice(index,1)
      let j = {}
      j[this.addfilekey] = JSON.stringify(this.files)
      this.form.setFieldsValue(j)
    },
    handleChange() {
      searchfile({fileName:this.searchvalue}).then(res=>{
        this.searchdata = res.data
        this.showsl = true
      })
    },
    handleuploadChange(info) {
      let fileList = [...info.fileList];
      fileList = fileList.slice(-1);
      this.fileList = fileList;
      console.log(fileList)
      if(fileList.length == 0){
        let j1 = {}
        j1.fileUrl = ''
        let j2 = {}
        j2.sourceFileName = ''
        let j3 = {}
        j3.size = ''
        this.form.setFieldsValue(j1)
        this.form.setFieldsValue(j2)
        this.form.setFieldsValue(j3)
      }else{
        if(fileList[0].response){
          let j1 = {}
          j1.fileUrl = fileList[0].response.filePath
          let j2 = {}
          j2.sourceFileName = fileList[0].response.fileName
          let j3 = {}
          j3.size = fileList[0].response.size
          this.form.setFieldsValue(j1)
          this.form.setFieldsValue(j2)
          this.form.setFieldsValue(j3)
        }
      }
    },
    resetmodal(){
      this.title = ''
      this.list = []
      this.fileList = []
      this.okfunc = null
      this.week = ''
      this.time = ''
      this.weektimekey=''
      this.timefrom=''
      this.timeto=''
      this.timerankkey=''
      this.failmode = ''
      this.failrepeat = ''
      this.failtime =''
      this.failkey =''
      this.mode = ''
      this.searchvalue = ''
      this.showsl = false
      this.files= []
      this.addfilekey= ''
      this.searchdata = []
    },
    changeweektime(){
      if(this.mode == 1){
        let j = {}
        j[this.weektimekey] = JSON.stringify({mode:1})
        this.form.setFieldsValue(j)
      }else if(this.week && this.time){
        let j = {}
        j[this.weektimekey] = JSON.stringify({week:this.week,time:moment(this.time).format('HH:mm'),mode:2})
        this.form.setFieldsValue(j)
      }else{
        let j = {}
        j[this.weektimekey] = null
        this.form.setFieldsValue(j)
      }
    },
    changetimerank(){
      if(this.timefrom && this.timeto){
        let j = {}
        j[this.timerankkey] = moment(this.timefrom).format('HH:mm') + '~' +  moment(this.timeto).format('HH:mm')
        this.form.setFieldsValue(j)
      }else{
        let j = {}
        j[this.timerankkey] = null
        this.form.setFieldsValue(j)
      }
    },
    changepush(){
      let j = {}
      j[this.failkey] = JSON.stringify({mode:this.failmode,time:this.failtime,repeat:this.failrepeat})
      this.form.setFieldsValue(j)
    },
    showmodal(modalinfo){
      this.form.resetFields()
      this.resetmodal()
      if(modalinfo){
        this.title = modalinfo.title
        this.list = modalinfo.list
        this.okfunc = modalinfo.ok
        this.moreinfo = modalinfo.moreinfo
      }

      this.visible = true

      setTimeout(()=>{
        for(let i in modalinfo.list){
          if(modalinfo.list[i].type == 'addfile'){
            this.addfilekey = modalinfo.list[i].name
            if(modalinfo.list[i].value){
              let v = JSON.parse(modalinfo.list[i].value)
              this.files = v
            }
          }

          if(modalinfo.list[i].type == 'weektime'){
            this.weektimekey = modalinfo.list[i].name
            if(modalinfo.list[i].value){
              let v = JSON.parse(modalinfo.list[i].value)
              this.week = v.week
              this.time = moment(v.time,'HH:mm')
              this.mode = v.mode?v.mode.toString():''
            }
          }

          if(modalinfo.list[i].type == 'timerank'){
            this.timerankkey = modalinfo.list[i].name
            if(modalinfo.list[i].value){
              let v = modalinfo.list[i].value.split('~')
              this.timefrom =  moment(v[0],'HH:mm')
              this.timeto =  moment(v[1],'HH:mm')
            }
          }

          if(modalinfo.list[i].type == 'pushmethod'){
            this.failkey = modalinfo.list[i].name
            if(modalinfo.list[i].value){
              let v = JSON.parse(modalinfo.list[i].value)
              this.failmode = v.mode
              this.failrepeat = v.repeat
              this.failtime = v.time
            }
          }



          if(modalinfo.list[i].value){
            let key = modalinfo.list[i].name
            let val = modalinfo.list[i].value
            let j = {}
            j[key] = val
            this.form.setFieldsValue(j)

            if(modalinfo.list[i].checkvalue){
              let key = modalinfo.list[i].checkname
              let val = [modalinfo.list[i].checkvalue.toString()]
              let j = {}
              j[key] = val
              this.form.setFieldsValue(j)
            }
          }

          /** IP **/
          if(modalinfo.list[i].type == 'iplist'){
            this.ipinput[modalinfo.list[i].name] = ''
            this.ipjson[modalinfo.list[i].name] = {
              ip:[]
            }
            if(modalinfo.list[i].value){
              this.ipjson[modalinfo.list[i].name] = JSON.parse(modalinfo.list[i].value)
            }
            let key = modalinfo.list[i].name
            let val = JSON.stringify(this.ipjson[modalinfo.list[i].name])
            let j = {}
            j[key] = val
            this.form.setFieldsValue(j)
          }

          if(modalinfo.list[i].type == 'upload'){
            if(modalinfo.list[i].value){
              let j2 = {}
              j2.sourceFileName = modalinfo.list[i].sourceFileName
              this.form.setFieldsValue(j2)
              let j3 = {}
              j3.size =  modalinfo.list[i].size
              this.form.setFieldsValue(j3)

              this.fileList = [
                {
                  uid: '-1',
                  name: modalinfo.list[i].sourceFileName,
                  status: 'done',
                  url: modalinfo.list[i].fileUrl,
                }
              ]

            }
          }

        }
      },0)

    },
    deleteip(name,index){
      this.ipjson[name].ip.splice(index,1)
      let key = name
      let val = JSON.stringify(this.ipjson[name])
      let j = {}
      j[key] = val
      this.form.setFieldsValue(j)
    },
    addip(name){
      if(this.ipinput[name]){
        let array = this.ipinput[name].split('.')
        if(array.length < 3){
          this.$message.error('格式不正确')
          return
        }

        let json = {}
        if(this.ipinput[name].indexOf('-')>-1){
          json.type = 3
        }else if(this.ipinput[name].indexOf('/')>-1){
          json.type = 2
        }else{
          json.type = 1
        }
        json.value = this.ipinput[name]
        this.ipjson[name].ip.push(json)
        let key = name
        let val = JSON.stringify(this.ipjson[name])
        let j = {}
        j[key] = val
        this.form.setFieldsValue(j)

        this.ipinput[name] = ''
      }
    },
    handleCancel(){
      this.visible = false
    },
    handleOk(){
      this.form.validateFields((err, values) => {
        if (!err) {
          let result = this.form.getFieldsValue()
          Object.assign(result,this.moreinfo)
          this.okfunc(result)
          this.visible = false
        }
      });
    }
  }
}
</script>

<style lang="less">
  @import "~ant-design-vue/es/tree-select/style/index.less";
  @import "~ant-design-vue/es/auto-complete/style/index.less";
  .iplist{
    border: 1px solid #ddd;
    padding: 5px;
    min-height: 100px;
    line-height: 30px;
    div:hover{
      background-color: #efefef;
    }
    .icon{
      color: red;
      cursor: pointer;
      line-height: 30px;
      float: right;
      margin-right: 20px;
    }
  }
  .tip{
    color: #999;
    display: inline-block;
    line-height: 20px;
    padding-top: 10px;
    font-size: 10px;
  }
  .searchb{
    position: relative;
    .searchi{
      border: 1px solid #ddd;
      height: 30px;
      width: 100%;
      padding:0 11px;
    }
    .searchi:focus{
      outline: none;
    }
    .searchl{
      position: absolute;
      width: 100%;
      left: 0;
      top:35px;
      background-color: #fff;
      border: 1px solid #ddd;
      .list{
        line-height: 30px;
        padding-left: 10px;
        cursor: pointer;
      }
      .list:hover{
        background-color: #efefef;
      }
    }
  }
</style>